<template>
  <div>
    <a-modal
      title="新增付款方式"
      width="529px"
      :visible="visible"
      :destroy-on-close="true"
      :mask-closable="false"
      @cancel="handleCancel"
    >
      <!-- 表单部分 -->
      <div class="content-box">
        <a-form :form="form" layout="horizontal">
          <a-form-item label="付款方式名称：">
            <div style="width: 320px" class="standard-ipt">
              <a-input v-model="queryParams.name" placeholder="请输入付款方式名称"/>
            </div>
          </a-form-item>
          <a-form-item label="付款方式类型：">
            <div style="width: 320px">
              <a-select
                dropdownClassName="custom-select"
                v-model="queryParams.method"
                placeholder="请选择"
                :default-active-first-option="false"
              >
                <a-select-option v-for="items in selectData" :key="items">
                  {{ items }}
                </a-select-option>
              </a-select>
            </div>
          </a-form-item>
          <a-form-item label="发票要求：">
            <div>
              <a-radio-group v-model="queryParams.demand">
                <a-radio :value="1" style="margin-right:28px">
                  增值税专票
                </a-radio>
                <a-radio :value="2">
                  增值税专票（不限开具方）
                </a-radio>
              </a-radio-group>
            </div>
          </a-form-item>
          <a-form-item label="对账时间：">
            <div class="select-row">
              <a-select
                dropdownClassName="custom-select-inner"
                v-model="queryParams.date1"
                placeholder="请选择"
                :default-active-first-option="false"
              >
                <a-select-option v-for="items in dateData1" :key="items">
                  {{ items }}
                </a-select-option>
              </a-select>
              <a-input
                style="width:58px;margin:0 8px;"
                addon-after="日"
                v-model="queryParams.days1"
              />
              <span class="txt-content">对账，完成对账后供应商开票。</span>
            </div>
          </a-form-item>
          <a-form-item label="付款时间：">
            <div class="select-row">
              <a-select
                dropdownClassName="custom-select-inner"
                v-model="queryParams.date2"
                placeholder="请选择"
                :default-active-first-option="false"
              >
                <a-select-option v-for="items in dateData2" :key="items">
                  {{ items }}
                </a-select-option>
              </a-select>
              <a-input
                style="width:58px;margin:0 8px;"
                addon-after="天"
                v-model="queryParams.days2"
              />
              <span class="txt-content">付款。</span>
            </div>
          </a-form-item>
          <div class="inner-line"></div>
          <a-form-item>
            <div>
              <a-radio-group v-model="queryParams.default">
                <a-radio :value="1" @click="changeRadio">
                  设为默认
                </a-radio>
              </a-radio-group>
              <span class="span-outer">
                只可设置一种付款方式
                <div class="span-inner"></div>
              </span>
            </div>
          </a-form-item>
        </a-form>
      </div>

      <!-- 底部部分 -->
      <template slot="footer">
        <div class="item-wrap">
          <div class="bottom-btn first-btn" @click="cancelSet">取消</div>
          <div class="bottom-btn sec-btn" @click="handleOk">确定</div>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form } from 'ant-design-vue'
Vue.use(Form)

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  watch:{
    visible: {
      handler (newVal) {
        if(newVal){
          //do sth
        }else {
          //do sth
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
      queryParams: {
        name: '',
        method: undefined,
        demand: 1,
        date1: undefined,
        date2: undefined,
        days1: undefined,
        days2: undefined,
        default: undefined
      },
      selectData: ['方式1','方式2'],
      dateData1: ['当月', '次月'],
      dateData2: ['对账完成后', '对账完成前']
    }
  },
  methods: {
    // 弹框关闭触发回调
    handleCancel() {
      console.log(11);
      this.$emit('update:visible', false)
    },
    // 点击取消触发事件
    cancelSet(){
      this.$emit('update:visible', false)
    },
    // 点击确定触发事件
    handleOk(){
      console.log(this.queryParams.default);
    },
    // 付款方式类型变化时触发
    handleSelectChange(){
      
    },
    // 设为默认单选框点击时触发
    changeRadio(){
      if(this.queryParams.default === undefined){
        this.queryParams.default = 1
      }else if(this.queryParams.default === 1){
        this.queryParams.default = undefined
      }
    }
  }
}
</script>

<style lang="less">
.custom-select .ant-select-dropdown-menu::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0px!important;
}
.custom-select .ant-select-dropdown-menu-item {
  font-size: 12px;
}
.custom-select-inner  .ant-select-dropdown-menu::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0px!important;
}
.custom-select-inner .ant-select-dropdown-menu-item {
  font-size: 12px;
}
.custom-select-inner {
  width: 140px;
}
</style>

<style lang="less" scoped>
/deep/ .ant-select {
  font-size: 12px;
  color: @newColorGreyFontM;
  opacity: 1;
}
/deep/ .select-row .ant-select {
  width: 140px;
}
/deep/ .select-row .ant-input {
  padding: 4px 10px;
}
/deep/ .ant-input-group-addon {
  padding: 0 5px;
  font-size: 12px;
}
/deep/ .ant-input {
  font-size: 12px;
}
/deep/ .ant-modal {
  top: 21%;
}
/deep/ .ant-modal-title {
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  color: #272424;
}
/deep/ .ant-modal-header {
  padding: 16px 24px;
}
/deep/ .ant-modal-close-x {
  width: 16px;
  height: 16px;
  margin-right: 24px;
}
/deep/ .ant-modal-footer {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
}
/deep/ .ant-modal-body {
  font-size: 12px;
  padding: 24px 24px 14px 24px;
}
/deep/ .ant-form label {
  width: 88px;
  text-align: right;
  font-size: 12px;
  display: inline-block;
  vertical-align: text-bottom;
}
/deep/ .ant-form-item-label {
  line-height: 30px;
}
/deep/ .ant-form-item {
  margin-bottom: 8px;
}
/deep/ .ant-form-item-control-wrapper {
  display: inline-block;
}
/deep/ .standard-ipt input::-webkit-input-placeholder{
  opacity: 0.3;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: @newColorGreyFontM;
}
/deep/ .standard-ipt input::-moz-placeholder{   /* Mozilla Firefox 19+ */
  opacity: 0.3;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: @newColorGreyFontM;
}
/deep/ .standard-ipt input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
  opacity: 0.3;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: @newColorGreyFontM;
}
/deep/ .standard-ipt input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
  opacity: 0.3;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: @newColorGreyFontM;
}
.item-wrap {
  width: 100%;
  padding: 0 24px;
  display: flex;
  justify-content: flex-end;
  .bottom-btn {
    width: 72px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    color: @newColorGreyFontM;
    cursor: pointer;
  }
  .first-btn {
    background: #ffffff;
    border: 1px solid rgba(39,36,36,0.06);
    border-radius: 2px;
  }
  .sec-btn {
    background: @activeRed;
    border-radius: 2px;
    color: #fff;
    margin-left: 16px;
  }
}
.content-box {
  .standard-ipt {
    input {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      color: @newColorGreyFontM;
      line-height: 16px;
    }
  }
}
.txt-content {
  font-size: 12px;
}
.inner-line {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #e8e8e8;
  margin-bottom: 16px;
}
.span-outer {
  position: relative;
  display: inline-block;
  height: 32px;
  line-height: 32px;
  background-color: rgba(255,144,3,0.08);
  border-radius: 2px;
  font-size: 12px;
  // box-shadow: 0px 0px 6px 1px rgba(39,36,36,0.06); 
  padding: 0 10px;
  color: #FF9003;
  .span-inner {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-100%,-50%);
    width: 0px;
    height: 0px;
    border-right: 5px solid rgba(255,144,3,0.07);
    border-top: 4px solid transparent;
    border-left: 5px solid transparent;
    border-bottom: 4px solid transparent;
  }
}
</style>